window.onload = function () {
    var scroll_bar = document.getElementById('nav-scrollbar');
    var home = document.getElementById('home');
    var category = document.getElementById('category');
    var profile = document.getElementById('profile');
    var other = document.getElementById('other');


    var nav_elements = [home, category, profile, other]

    function nav_light(element) {
        nav_elements.forEach(function (v) {
            v.style.opacity = '1'
        });
        // element.style.opacity = '0.5'
    }

    function mscroll_bar(offset){
        var scro_loc = scroll_bar.offsetLeft;
        var len = '';
        len = offset - scro_loc;
        scroll_bar.style.transform = 'translateX(' + len + 'px)'
    }

    scroll_bar.style.transitionDuration = '100ms'
    home.onclick = function () {
        var home_loc = home.offsetLeft;
        mscroll_bar(home_loc)
        nav_light(this)
    }

    category.onclick = function () {
        var home_loc = category.offsetLeft;
        mscroll_bar(home_loc)
        nav_light(this)
    }

    profile.onclick = function () {
        var home_loc = profile.offsetLeft;
        mscroll_bar(home_loc)
        nav_light(this)
    }

    other.onclick = function () {
        var home_loc = other.offsetLeft;
        mscroll_bar(home_loc)
        nav_light(this)
    }

    // document.body.onscroll = function () {
    //     if (window.innerWidth > 900)
    //         return;
    //     var top = document.documentElement.scrollTop
    //     var info = document.getElementById('head-content-info');
    //     var head = document.getElementById('head-content');
    //     var title = document.getElementById('head-title');
    //     var toolbar = document.getElementById('head-toolbar');
    //     if (top > 252) {
    //         head.style.height = '50px';
    //         head.style.position = 'fixed'
    //         info.style.display = 'none';
    //         title.style.display = 'none';
    //         toolbar.style.marginTop = '13px'
    //     } else {
    //         head.style.height = '300px';
    //         head.style.position = ''
    //         info.style.display = '';
    //         title.style.display = '';
    //         toolbar.style.marginTop = ''
    //     }
    // }


}